<template>
    <div class="game-detail" v-loading="loading" @paste="paste">
        <div class="game-detail-box">
            <div class="game-top" ref="gameTop">
                <div class="same-package-btn-box" style="margin-bottom:10px" v-if="detail.approveStatus === 0">
                    <span class="same-package-title">审核状态：</span>
                    <span class="same-package-type">待审核</span>

                    <span class="same-package-title">审核结果：</span>
                    <el-button type="success" size="mini" @click="changeGameStatus(1)">可下载</el-button>
                    <el-button type="info" size="mini" @click="changeGameStatus(0)">不可下载</el-button>
                    <el-button type="danger" size="mini" @click="changeGameStatus(-1)">下架</el-button>
                </div>

                <div class="same-package-btn-box" v-if="detail.packageFlag === '0'">
                    <span class="same-package-title">雷同包：</span>
                    <span class="same-package-type">是</span>
                    <el-button type="success" size="mini" @click="updatePackageFlag('1')">忽略</el-button>
                </div>
                <div class="same-package-btn-box" v-else-if="detail.packageFlag === '1'">
                    <span class="same-package-title">雷同包：</span>
                    <span class="same-package-type">已忽略雷同</span>
                    <el-button type="success" size="mini" @click="updatePackageFlag('0')">取消忽略</el-button>
                </div>
                <el-form
                    :model="detail"
                    :rules="rules"
                    ref="detail"
                    :hide-required-asterisk="true"
                    label-width="100px"
                    class="input-no-border-box">
                    <div class="form-flex">
                        <div class="left-form">
                            <el-form-item label="游戏名称" prop="name">
                                <el-input v-model.trim="detail.name"></el-input>
                            </el-form-item>
                            <el-form-item label="游戏icon" prop="icon">
                                <el-input v-model.trim="detail.icon" style="margin-bottom:10px"></el-input>
                                <uploadOwnImg v-model="detail.icon"/>
                            </el-form-item>
                            <el-form-item label="下载地址" prop="downloadUrl">
                                <el-input v-model.trim="detail.downloadUrl"></el-input>
                                <div style="margin-top: 10px;"></div>
                                <apkAnalysis :url="detail.downloadUrl" @uploadEnd="uploadEnd" @getMsg="getMsg"/>
                            </el-form-item>
                            <el-form-item label="package" prop="package">
                                <el-input v-model.trim="detail.package"></el-input>
                            </el-form-item>
                            <el-form-item label="游戏副标题" prop="title">
                                <el-input v-model.trim="detail.title"></el-input>
                            </el-form-item>
                            <el-form-item label="游戏类型" prop="categories">
                                <el-select
                                    v-model="detail.categories"
                                    multiple
                                    placeholder="请选择游戏类型">
                                    <el-option
                                        v-for="item in gameTypeList"
                                        :key="item.category"
                                        :label="item.name"
                                        :value="item.category">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="游戏来源" prop="categories">
                                <el-select
                                    v-model="detail.source"
                                    @change="sourceChange"
                                    placeholder="请选择游戏来源">
                                    <el-option label="客户" :value="2"></el-option>
                                    <el-option label="人工" :value="4"></el-option>
                                    <el-option label="taptap" :value="0"></el-option>
                                    <el-option label="应用宝" :value="1"></el-option>
                                    <el-option label="小米" :value="5"></el-option>
                                    <el-option label="学习识别" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="厂商" prop="publishername">
                                <el-select
                                    style="width:500px;"
                                    v-model="detail.publishername"
                                    filterable
                                    clearable
                                    :loading="publisherLoading"
                                    @change="publisherChange"
                                    :filter-method="filterMethod"
                                    placeholder="请输入并选择厂商">
                                    <el-option
                                        v-for="item in publisherList"
                                        :key="item.publisherid"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="游戏状态" prop="version" v-if="detail.approveStatus === 1">
                                <el-radio-group v-model="detail.status">
                                    <el-radio :label="1">可下载</el-radio>
                                    <el-radio :label="0">不可下载</el-radio>
                                    <el-radio :label="-1">下架</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="当前版本" prop="version">
                                <el-input v-model.trim="detail.version"></el-input>
                            </el-form-item>
                        </div>

                        <div class="right-form">
                            <div class="right-items">
                                <div class="right-title">评分</div>
                                <div class="right-content rate-box">
                                    <!-- <el-rate
                                    :value="detail.score / 2"
                                    disabled>
                                    </el-rate> -->
                                    <span class="rate-num">{{detail.score}}</span>
                                </div>
                            </div>
                            <div class="right-items">
                                <div class="right-title">资费</div>
                                <div class="right-content">免费</div>
                            </div>
                            <!-- <div class="right-items">
                                <el-form-item label="版本" prop="name" label-width="80px">
                                    <el-input v-model.trim="detail.version"></el-input>
                                </el-form-item>
                            </div> -->
                            <div class="right-items">
                                <!-- <div class="right-title">大小</div> -->
                                <!-- <div class="right-content">{{detail.size | sizeFilter}}</div> -->
                                <el-form-item label="大小" prop="name" label-width="80px">
                                    <el-input v-model.trim="detail.size"></el-input>
                                </el-form-item>
                            </div>
                            <div class="right-items">
                                <div class="right-title">大小</div>
                                <div class="right-content">{{detail.size | sizeFilter}}</div>
                            </div>
                            <div class="right-items">
                                <div class="right-title">更新时间</div>
                                <div class="right-content">{{detail.updateTime | timeNo0}}</div>
                            </div>
                            <div class="right-items">
                                <!-- <div class="right-title">应用分级</div>
                                <div class="right-content">{{detail.grade}}</div> -->
                                <el-form-item label="应用分级" prop="name" label-width="80px">
                                    <el-input v-model.trim="detail.grade"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </div>

                    <el-form-item label="游戏标签" prop="desc">
                        <el-select v-model="detail.tags" filterable multiple placeholder="请选择" style="width:100%;">
                            <el-option
                                v-for="item in tagsList"
                                :key="item.id"
                                :label="item.tag"
                                :value="item.tag">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="游戏简介" prop="desc">
                        <el-input
                        type="textarea"
                        :rows="7"
                        placeholder="请输入内容"
                        v-model="detail.desc">
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-card shadow="hover" class="items-card">
                    <div class="card-title">
                        <span>游戏介绍首页推荐视频</span>
                        <span class="video-set" @click="setVideo('index')" v-if="detail.gameid">设置</span>
                    </div>
                    <div v-if="detail.indexVideo && detail.indexVideo.videoid">
                        <videoBox :url="detail.indexVideo.url" :img="detail.indexVideo.cover" :time="detail.indexVideo.duration"/>
                    </div>
                </el-card>

                <el-card shadow="hover" class="items-card">
                    <div class="card-title">
                        <span>首页展示</span>
                        <!-- <span class="card-num">(最多可设置10个)</span> -->
                        <span class="video-set" @click="setVideo('home')" v-if="detail.gameid">设置</span>
                    </div>
                    <div class="dragging-box">
                        <div class="dragging-item"
                            v-for="(item, index) in detail.homeVideos"
                            v-dragging="{ item: item, list: detail.homeVideos}"
                            :key="index">
                            <videoBox :url="item.url" :img="item.cover" :time="item.duration"/>
                            <div class="dragging-btn"><el-button type="danger" size="mini" @click="delIndexVideoItem(item.videoid, index)">删除</el-button></div>
                        </div>
                    </div>
                </el-card>

                <el-card shadow="hover" class="items-card">
                    <div class="card-title">
                        <span>官方视频</span>
                        <span class="card-num">(共{{detail.officeVideos.length}}个)</span>
                        <span class="video-set" @click="uploadVideo" v-if="detail.gameid">去上传</span>
                    </div>
                    <div class="video-scroll-list" v-if="detail.officeVideos.length">
                        <div class="scroll-wrap" :style="{'width': 170 * detail.officeVideos.length}">
                            <div class="scroll-item" v-for="(item, index) in detail.officeVideos" :key="index">
                                <videoBox :url="item.mp4Url || item.url" :img="item.cover" :time="item.duration"/>
                                <div class="scroll-btn"><el-button type="success" size="mini" :disabled="item.showHome === 1" @click="toIndexList(item)">设为首页推荐</el-button></div>
                                <div class="scroll-btn"><el-button type="primary" size="mini" :disabled="item.homeIndex > 0" @click="toHomeList(item)">设为首页展示</el-button></div>
                                <div class="scroll-btn" v-if="item.videoid"><el-button type="info" size="mini" @click="goVideoDetail(item.videoid)">查看视频详情</el-button></div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <el-card shadow="hover" class="items-card">
                    <div class="card-title">
                        <span>用户视频</span>
                        <span class="card-num">(共{{detail.userVideos.length}}个)</span>
                    </div>
                    <div class="video-scroll-list" v-if="detail.userVideos.length">
                        <div class="scroll-wrap" :style="{'width': 170 * detail.userVideos.length}">
                            <div class="scroll-item" v-for="(item, index) in detail.userVideos" :key="index">
                                <videoBox :url="item.mp4Url || item.url" :img="item.cover" :time="item.duration"/>
                                <div class="scroll-btn"><el-button type="success" size="mini" :disabled="item.showHome === 1" @click="toIndexList(item)">设为首页推荐</el-button></div>
                                <div class="scroll-btn"><el-button type="primary" size="mini" :disabled="item.homeIndex > 0" @click="toHomeList(item)">设为首页展示</el-button></div>
                                <div class="scroll-btn" v-if="item.videoid"><el-button type="info" size="mini" @click="goVideoDetail(item.videoid)">查看视频详情</el-button></div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 游戏展示相关 -->
                <el-card shadow="hover" class="items-card">
                    <gameCutImg :cover="detail.cover" :banner="detail.banner" @updateImg="updateImg"/>
                </el-card>

                <!-- 素材 -->
                <el-card shadow="hover" class="items-card material-box">
                    <div class="card-title">
                        <span>素材</span>
                        <span class="video-set" @click="getBaiduImg">百度搜图</span>
                    </div>
                    <div class="material-imgs">
                        <uploadCutImgList :list="imgList320" :width="1080" :height="1440" @setBanner="setBanner" :banner="detail.banner" :cover="detail.cover" @setCover="setCover"/>
                    </div>
                    <div class="material-imgs">
                        <uploadCutImgList :list="imgLIst160" :width="1080" :height="528" @setBanner="setBanner" :banner="detail.banner" :cover="detail.cover" @setCover="setCover"/>
                    </div>
                    <div class="material-imgs">
                        <uploadCutImgList :list="imgLIst112" :width="560" :height="720" @setBanner="setBanner" :banner="detail.banner" :cover="detail.cover" @setCover="setCover"/>
                    </div>
                </el-card>

                <!-- 主包设置 -->
                <el-card shadow="hover" class="items-card package-set-box" v-if="id">
                    <div class="card-title" v-if="packageDetail.leader === 0">
                        <span>主包设置</span>
                        <span class="card-num">(主包相关设置无需点击下方保存按钮即可保存，请谨慎操作)</span>
                    </div>
                    <div class="card-title" v-else>
                        <span>分包设置</span>
                    </div>
                    <div class="package-item">
                        <div class="package-title">
                            <b>类型：</b>
                            <span style="color:#67C23A;" v-if="packageDetail.leader === 0">主包</span>
                            <span style="color:#F56C6C;" v-else-if="packageDetail.leader === 1">分包</span>
                            <span v-else>未知</span>
                        </div>
                        <template v-if="packageDetail.leader !== 0">
                            <div class="package-title" style="margin-left:10px;">
                                <b>已关联主包：</b>
                            </div>
                            <div class="package-btn" @click="goGameDetailBlank(packageDetail.leaderId)">{{packageDetail.leaderName}}</div>
                        </template>
                    </div>

                    <template v-if="packageDetail.leader === 0">
                        <div class="package-item">
                            <div class="package-title">
                                <b>分身游戏：</b>
                            </div>
                            <div class="package-btn" @click="addAssociated">添加分身</div>
                        </div>
                        <el-table
                            :data="packageDetail.nodes"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="gameName"
                                label="游戏名">
                                <template slot-scope="scope">
                                    <div class="table-app-box" v-if="scope.row.icon">
                                        <img :src="scope.row.icon" alt="">
                                        <div>
                                            <span class="table-btn" @click="setMainIcon(scope.row.icon)">设为主游icon</span>
                                        </div>
                                    </div>
                                    <div>{{scope.row.gameName || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="gamePackage"
                                label="package">
                                <template slot-scope="scope">
                                    <div>{{scope.row.gamePackage || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="source"
                                label="游戏来源">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.source === 0">taptap</span>
                                    <span v-else-if="scope.row.source === 1">应用宝</span>
                                    <span v-else-if="scope.row.source === 2">客户</span>
                                    <span v-else-if="scope.row.source === 3">学习识别</span>
                                    <span v-else-if="scope.row.source === 4">人工</span>
                                    <span v-else-if="scope.row.source === 5">小米</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="hasApk"
                                label="是否有apk">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.hasApk">有</div>
                                    <div v-else>-</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="userNum"
                                label="用户数">
                                <template slot-scope="scope">
                                    <div>{{scope.row.userNum || '0'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.gameId"><el-button @click="goGameDetailBlank(scope.row.gameId)" type="text" size="small">查看详情</el-button></div>
                                    <div><el-button @click="noAssociated(scope.row, scope.$index)" type="text" size="small">解除关联</el-button></div>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="package-item">
                            <div class="package-title">
                                <b>类似游戏：</b>
                            </div>
                        </div>
                        <el-table
                            :data="packageDetail.similarGames"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="gameName"
                                label="游戏名">
                                <template slot-scope="scope">
                                    <div class="table-app-box" v-if="scope.row.icon">
                                        <img :src="scope.row.icon" alt="">
                                        <div>
                                            <span class="table-btn" @click="setMainIcon(scope.row.icon)">设为主游icon</span>
                                        </div>
                                    </div>
                                    <div>{{scope.row.gameName || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="gameId"
                                label="游戏ID">
                                <template slot-scope="scope">
                                    <div>{{scope.row.gameId || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="gamePackage"
                                label="package">
                                <template slot-scope="scope">
                                    <div>{{scope.row.gamePackage || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="source"
                                label="游戏来源">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.source === 0">taptap</span>
                                    <span v-else-if="scope.row.source === 1">应用宝</span>
                                    <span v-else-if="scope.row.source === 2">客户</span>
                                    <span v-else-if="scope.row.source === 3">学习识别</span>
                                    <span v-else-if="scope.row.source === 4">人工</span>
                                    <span v-else-if="scope.row.source === 5">小米</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="hasApk"
                                label="是否有apk">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.hasApk">有</div>
                                    <div v-else>-</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="userNum"
                                label="用户数">
                                <template slot-scope="scope">
                                    <div>{{scope.row.userNum || '0'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作">
                                <template slot-scope="scope">
                                    <div><el-button @click="addPlace(scope.row)" type="text" size="small">添加为当前游戏分身</el-button></div>
                                    <div class="table-btn" v-if="packageDetail.nodes && !packageDetail.nodes.length" @click="setPlace(scope.row)">将当前游戏设为游戏ID {{scope.row.gameId}} 的分身</div>
                                    <div v-if="scope.row.gameId"><el-button @click="goGameDetailBlank(scope.row.gameId)" type="text" size="small">查看详情</el-button></div>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- <div class="package-item">
                            <div class="package-title">
                                <b>类似包名：</b>
                            </div>
                        </div>
                        <el-table
                            :data="packageDetail.similarPackages"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="gameName"
                                label="游戏名">
                                <template slot-scope="scope">
                                    <div>{{scope.row.gameName || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="gamePackage"
                                label="package">
                                <template slot-scope="scope">
                                    <div>{{scope.row.gamePackage || '-'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="hasApk"
                                label="是否有apk">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.hasApk">有</div>
                                    <div v-else>-</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="userNum"
                                label="用户数">
                                <template slot-scope="scope">
                                    <div>{{scope.row.userNum || '0'}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.gameId"><el-button @click="goGameDetailBlank(scope.row.gameId)" type="text" size="small">查看详情</el-button></div>
                                    <div><el-button @click="similarCheck(scope.row)" type="text" size="small">添加至分身</el-button></div>
                                </template>
                            </el-table-column>
                        </el-table> -->
                    </template>

                </el-card>
            </div>

            <div class="game-bottom">
                <el-button @click="goback" class="btn">返回列表</el-button>
                <el-button type="success" class="btn save-btn" @click="saveGame" v-if="detail.gameid">保存</el-button>
                <el-button type="success" class="btn save-btn" @click="creatGame" v-else>新建</el-button>
            </div>

        </div>

        <el-dialog
            :title="checkVideoType === 'index' ? '设置为首页推荐' : '设置为首页展示'"
            class="index-show-list"
            :visible.sync="showVideoList"
            width="900px">
            <videoListBox :indexList="targetVideoList" :officeVideos="detail.officeVideos" :userVideos="detail.userVideos" @changeIndex="changeIndex" :checkVideoType="checkVideoType" :gameid="detail.gameid"/>
        </el-dialog>

        <el-dialog
            title="游戏列表"
            class="main-package-check-game"
            :visible.sync="showGameList"
            width="90%">
            <mainPackageCheckGame v-if="showGameList" @updateGame="checkGame" :gameName="detail.name" @close="showGameList = false" :disabledList="mainPackageDList"/>
        </el-dialog>

        <el-dialog
            title="百度搜图"
            class="baidu-search-box"
            :visible.sync="showBaiduSearch"
            width="90%">
            <div class="baidu-box" ref="baiduBox">
                <div class="search-box">
                    <el-input v-model.trim="baiduSearchKeyWord" @keyup.enter.native="resetBaiduSearch" style="width:400px" clearable></el-input>
                    <div class="baidu-btn" @click="resetBaiduSearch">百度一下</div>
                </div>
                <ul class="baidu-img-list-box" :infinite-scroll-disabled="baiduNoMore || baiduLoading " v-if="baiduImgList && baiduImgList.length" v-infinite-scroll="baiduSearch" style="overflow:auto">
                    <li v-for="(item, index) in baiduImgList"  @click="checkBaiduImg(item)" class="baidu-img-list-item" :key="index" :class="{'no-show-img': !item._height, 'img-checked': item.isCheck}">
                        <img :src="item.middleURL" alt="" :style="{height: item._height + 'px', width: item._width + 'px', backgroundColor: item._bgc}">
                        <div class="hover-box">{{item.width}} x {{item.height}}</div>
                        <div class="check-box"></div>
                    </li>
                    <li class="baidu-center" v-if="baiduNoMore">没有更多了~</li>
                    <li v-if="baiduLoading" class="baidu-center">加载中...</li>
                </ul>
                <div class="baidu-center" v-else-if="baiduNoMore">没有更多了~</div>
                <div class="no-baidu-img" v-else>输入搜索条件后查询~</div>
            </div>

            <div class="baidu-btn-box" v-if="baiduImgCheckList && baiduImgCheckList.length">
                <el-button type="info" @click="cancleChecked">取消选中({{baiduImgCheckList.length}}条)</el-button>
                <el-button type="primary" @click="addToWarehouse">添加到素材库</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
import videoListBox from './videoListBox'
import apkAnalysis from './apkAnalysis'
import mainPackageCheckGame from './mainPackageCheckGame'
import gameCutImg from './gameCutImg'
export default {
    data () {
        return {
            detail: {
                gameid: '',
                name: '',
                appPackage: '',
                icon: '',
                size: 0,
                status: 1,
                downloadUrl: '',
                price: 0,
                title: '',
                banner: '',
                cover: '',
                desc: '',
                version: '',
                score: 10,
                publisherid: '',
                downloadNum: 0,
                commentNum: 0,
                day: '',
                grade: 0,
                updateDesc: '',
                createTime: '',
                updateTime: '',
                publishername: '',
                categories: [],
                indexVideo: null,
                homeVideos: [],
                officeVideos: [],
                userVideos: [],
                sourceList: [],
                tags: [],
                source: 4,
                package: ''
            },
            id: '',
            loading: false,
            publisherLoading: false,
            rules: {
            },
            showVideoList: false,
            gameTypeList: [], // 游戏类型列表
            publisherList: [], // 厂商列表
            targetVideoList: [], // 禁止操作的视频
            checkVideoType: 'index', // 窗口视频类型
            imgList320: [],
            imgLIst160: [],
            imgLIst112: [],
            tagsList: [], // 标签列表
            packageDetail: {
                gameId: '', // 当前游戏ID
                gamePackage: '', // 当前游戏包名
                leader: 0, // 当前游戏的主分类型:0主包,1分包,2未知
                leaderId: '', // 关联的主游戏ID ,
                leaderName: '', // 关联的主游戏名称 ,
                leaderPackage: '', // 关联的主游戏包名 ,
                nodes: [], // 分身游戏 ,
                similarGames: [] // 类似游戏 ,
            }, // 主分身包详情
            mainPackageDList: [], // 禁止选中的列表
            showGameList: false, // 选择游戏
            showBaiduSearch: false, // 百度搜图
            baiduSearchKeyWord: '', // 百度搜图关键字
            baiduImgList: [], // 百度查询结果图片
            baiduNoMore: false,
            baiduLoading: false,
            baiduPageNum: 0,
            scaleList: [], // 总比例数组
            rowScale: 0, // 一行总比例计数
            baiduImgCheckList: [] // 百度选中的图片
        }
    },

    mounted () {
        this.id = this.$route.query.id
        if (this.id) {
            this.getDetail()
        } else {
            let _gamePublishername = window.localStorage.getItem('_gamePublishername')
            if (_gamePublishername) {
                this.detail.publishername = _gamePublishername
                this.getPublisherList(_gamePublishername)
            }
        }
        this.getTagsList()
        this.getGameTypeList()
    },

    computed: {
        starsNum () {
            let num = 0
            if ((typeof this.detail.stars) === 'object') {
                num = this.detail.stars.reduce((a, b) => {
                    return a + b
                })
            }
            return num
        }
    },

    methods: {

        // 更新游戏审核状态
        async changeGameStatus (status) {
            let params = {
                id: this.detail.gameid,
                status
            }
            let res = await this.$http.post('/game/updateGameStatus', params)
            if (res.code === '0') {
                this.detail.status = status
                this.detail.approveStatus = 1
                this.saveGame()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 全局捕获剪贴板上传图片
        paste (event) {
            var items = (event.clipboardData && event.clipboardData.items) || []
            let file = null
            if (items && items.length) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile()
                        break
                    }
                }
            }
            if (!file) return
            if (this.loading) return
            this.loading = true
            this.uploadImgFn(file)
        },

        // 上传图片
        uploadImgFn (file) {
            // eslint-disable-next-line no-undef
            let formData = new FormData()
            formData.append('file', file)
            formData.append('needTransform', 1)
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            this.$http.post('/file/uploadPic', formData, config).then(res => {
                if (res.code === '0') {
                    this.detail.icon = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        // 获取详情
        async getDetail () {
            this.loading = true
            let params = {
                id: this.id
            }
            let res = await this.$http.post('/game/findGameDetail', params)
            if (res.code === '0') {
                this.dataInit(res.data)
                this.detail = res.data || {}
                this.getPackageDetail()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
                this.loading = false
            }
        },

        // 数据初始化
        dataInit (data) {
            if (data.categories) {
                data.categories = data.categories.split(',')
                for (let i = 0; i < data.categories.length; i++) {
                    data.categories[i] = +data.categories[i]
                }
            } else {
                data.categories = []
            }
            if (data.tags) {
                data.tags = data.tags.split(',') || []
            } else {
                data.tags = []
            }
            for (let i = 0; i < data.tags.length; i++) {
                let item = data.tags[i]
                if (data.tags.indexOf(item) !== data.tags.lastIndexOf(item)) {
                    data.tags.splice(data.tags.lastIndexOf(item), 1)
                }
            }
            this.imgList320 = data.sourceList.filter(item => {
                return item.type === 1
            })

            this.imgLIst160 = data.sourceList.filter(item => {
                return item.type === 3
            })

            this.imgLIst112 = data.sourceList.filter(item => {
                return item.type === 5
            })
        },

        // 获取类型列表
        async getGameTypeList () {
            let res = await this.$http.post('/game/findGameCategories')
            this.gameTypeList = res.data
        },

        // 游戏来源数据切换
        sourceChange (val) {
            // 没有id package 不能查询
            if (!this.id || !this.detail.package) return
            // taptap 0   应用宝 1
            if (val === 0 || val === 1) {
                this.chageDataFrom(val)
            }
        },

        // 切换来源数据
        async chageDataFrom (source) {
            let params = {
                packageName: this.detail.package,
                source
            }

            let res = await this.$http.get('/game/selectGameBySource', {
                params
            })

            if (res.code === '0') {
                if (res.data) {
                    // apk icon size md5 版本 更新时间  需要替换
                    this.detail.downloadUrl = res.data.apkUrl || this.detail.downloadUrl
                    this.detail.icon = res.data.icon || this.detail.icon
                    this.detail.size = res.data.size || this.detail.size
                    this.detail.md5 = res.data.md5 || this.detail.md5
                    this.detail.version = res.data.version || this.detail.version
                    if (res.data.updateTime) {
                        res.data.updateTime = formatDate(res.data.updateTime, 'YYYY-MM-DD HH:MM:SS')
                        this.detail.updateTime = res.data.updateTime
                    }
                    this.$message({
                        type: 'info',
                        message: '检测到最新数据，已为您自动替换，请检查无误后保存！',
                        duration: 5000
                    })
                } else {
                    this.detail.downloadUrl = ''
                    this.detail.icon = ''
                    this.detail.size = ''
                    this.detail.md5 = ''
                    this.detail.version = ''
                    this.detail.updateTime = ''
                    this.$message({
                        type: 'info',
                        message: '库内无数据，请重新选择数据来源或手动填写数据！',
                        duration: 5000
                    })
                }
            }
        },

        // 获取标签类型列表
        async getTagsList () {
            let res = await this.$http.post('/game/findTags')
            if (res.code === '0') {
                res.data.sort((param1, param2) => {
                    let str1 = param1.tag || ''
                    let str2 = param2.tag || ''
                    return str1.localeCompare(str2, 'zh-CN')
                })
                this.tagsList = res.data || []
            } else {
                this.tagsList = []
            }
        },

        // 忽略雷同
        async updatePackageFlag (status) {
            let res = await this.$http.post('/gameLeader/updatePackageFlag', {
                gameId: this.id,
                flag: status
            })
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
                this.detail.packageFlag = status
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 每隔1s查询
        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.publisherLoading = false
                return
            }
            this.publisherLoading = true
            this.timerId = setTimeout(() => {
                this.getPublisherList(res)
            }, 1000)
        },

        // 查询厂商接口
        async getPublisherList (keyword) {
            let params = {
                keyword
            }
            let res = await this.$http.post('/game/findPublisher', params)
            if (res.code === '0') {
                this.publisherList = res.data || []
                this.publisherList.forEach(item => {
                    if (item.name === this.detail.publishername) {
                        this.detail.publisherid = item.publisherid
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.publisherLoading = false
        },

        // 切换厂商
        publisherChange (val) {
            window.localStorage.setItem('_gamePublishername', val)
            this.publisherList.forEach(item => {
                if (item.name === val) {
                    this.detail.publisherid = item.publisherid
                }
            })
        },

        goback () {
            this.$router.push('/game/gameList')
        },

        // 设置首页展示
        setVideo (type) {
            this.checkVideoType = type
            // 设置为首页推荐
            if (type === 'index') {
                this.targetVideoList = this.detail.indexVideo || {}
            // 设置为首页展示
            } else {
                this.targetVideoList = this.detail.homeVideos
            }
            this.showVideoList = true
        },

        // 去上传视频
        uploadVideo () {
            let query = {}
            if (this.detail.gameid) {
                query.gameid = this.detail.gameid
            }
            if (this.detail.name) {
                query.name = this.detail.name
            }
            query.gameid =
            this.$router.push({
                path: '/video/videoDetail',
                query
            })
        },

        // 更换首页推荐视频
        changeIndex (item) {
            this.detail.officeVideos.forEach(videoItem => {
                videoItem.showHome = 0
                if (videoItem.videoid === item.videoid) {
                    videoItem.showHome = 1
                }
            })
            this.detail.userVideos.forEach(videoItem => {
                videoItem.showHome = 0
                if (videoItem.videoid === item.videoid) {
                    videoItem.showHome = 1
                }
            })
            this.detail.indexVideo = item
            this.showVideoList = false
        },

        submitInit () {
            let data = JSON.parse(JSON.stringify(this.detail))
            this.imgList320.forEach(item => {
                delete item.loading
                item.type = 1
            })
            this.imgLIst160.forEach(item => {
                delete item.loading
                item.type = 3
            })
            this.imgLIst112.forEach(item => {
                delete item.loading
                item.type = 5
            })
            data.sourceList = [...this.imgList320, ...this.imgLIst160, ...this.imgLIst112]
            data.tags = data.tags.join()
            data.categories = data.categories.join()
            return data
        },

        // 设为首页推荐
        toIndexList (item) {
            this.detail.officeVideos.forEach(item => {
                item.showHome = 0
            })
            this.detail.userVideos.forEach(item => {
                item.showHome = 0
            })
            item.showHome = 1
            this.detail.indexVideo = item
            this.$message({
                type: 'success',
                message: '设置成功'
            })
        },

        // 设为首页展示
        toHomeList (item) {
            item.homeIndex = this.detail.homeVideos.length
            this.detail.homeVideos.unshift(item)
            this.$message({
                type: 'success',
                message: '设置成功'
            })
        },

        // 删除首页视频
        delIndexVideoItem (id, index) {
            this.detail.officeVideos.forEach(item => {
                if (item.videoid === id) {
                    item.homeIndex = 0
                }
            })
            this.detail.userVideos.forEach(item => {
                if (item.videoid === id) {
                    item.homeIndex = 0
                }
            })
            this.detail.homeVideos.splice(index, 1)
            this.$message({
                type: 'success',
                message: '删除成功'
            })
        },

        // 保存游戏
        async saveGame () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/game/updateGame', this.submitInit())
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '保存成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 新建游戏
        async creatGame () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/game/addGame', this.submitInit())
            if (res.code === '0') {
                this.dataInit(res.data)
                this.detail = res.data
                this.$message({
                    type: 'success',
                    message: '新建成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        uploadEnd (url) {
            this.detail.downloadUrl = url
        },

        getMsg (msg) {
            this.detail.name = msg.trackName || this.detail.name
            this.detail.package = msg.packageName || this.detail.package
            this.detail.icon = msg.smallIcon || this.detail.icon
            this.detail.size = msg.fileSizeBytes || this.detail.size
            this.detail.version = msg.versionName || this.detail.version
        },

        setBanner (url) {
            this.detail.banner = url
        },

        setCover (url) {
            this.detail.cover = url
        },

        goVideoDetail (id) {
            this.$router.push({
                path: '/video/videoDetail',
                query: {
                    id
                }
            })
        },

        // 游戏展示相关
        // 更新图片
        updateImg (url, type) {
            if (type === 'gameImg') {
                this.detail.cover = url
            } else if (type === 'bannerImg') {
                this.detail.banner = url
            }
        },

        // 百度搜索相关
        // 打开百度搜图弹窗
        getBaiduImg () {
            this.showBaiduSearch = true
        },

        // 重新查图
        resetBaiduSearch () {
            // 重置相关参数
            // 计数
            this.baiduPageNum = 0
            // 计算一行图片数组
            this.scaleList = []
            // 一行计算总数
            this.rowScale = 0
            // 清空总图片
            this.baiduImgList = []
            // 选中图片
            this.baiduImgCheckList = []
            this.baiduNoMore = false
            this.baiduSearch()
        },

        // 百度搜图接口
        async baiduSearch (e) {
            let width = this.$refs.baiduBox.clientWidth - 20
            if (!this.baiduSearchKeyWord) {
                this.$message({
                    type: 'info',
                    message: '请输入查询条件~'
                })
                return
            }
            this.baiduLoading = true
            this.baiduPageNum++
            let res = await this.$http.get('/task/getImage', {
                params: {
                    keyword: this.baiduSearchKeyWord,
                    pageNum: this.baiduPageNum,
                    pageSize: 30
                }
            })
            if (res.code === '0' && res.data && res.data.length) {
                res.data.forEach(item => {
                    // 单个图片比例
                    item._scale = item.width / item.height
                    // 总比例累计
                    this.rowScale += item._scale

                    item.isCheck = false
                    // 总比例数组累计元素
                    this.scaleList.push(item)
                    if (this.rowScale >= 6) {
                        let _width = width - (this.scaleList.length - 1) * 6
                        this.scaleList.forEach(_item => {
                            _item._height = _width / this.rowScale
                            _item._width = _item._scale * _item._height
                            let _random = Math.random() * 255
                            _item._bgc = `rgb(${_random}, ${_random}, ${_random})`
                        })
                        this.scaleList = []
                        this.rowScale = 0
                    }
                })
                this.baiduImgList.push(...res.data)
            } else {
                this.baiduNoMore = true
            }
            this.baiduLoading = false
        },

        // 选中、取消 单个图片
        checkBaiduImg (item) {
            item.isCheck = !item.isCheck
            if (item.isCheck) {
                this.baiduImgCheckList.push(item)
            } else {
                this.baiduImgCheckList = this.baiduImgCheckList.filter(_item => _item.isCheck)
            }
        },

        // 取消选中
        cancleChecked () {
            // 清空选中
            this.baiduImgCheckList.forEach(item => {
                item.isCheck = false
            })
            // 清空选中数组
            this.baiduImgCheckList = []
            this.showBaiduSearch = false
        },

        // 添加到素材库
        addToWarehouse () {
            this.baiduImgCheckList.forEach(item => {
                item.url = item.thumbURL
                item.loading = true
                let _scale = item._scale
                if (_scale >= 1.9 && _scale <= 2.55) {
                    item.type = 3
                    this.imgLIst160.unshift(item)
                    this.urlUploadImg(item, this.imgLIst160)
                } else if (_scale > 0.85 && _scale < 1.25) {
                    item.type = 1
                    this.imgList320.unshift(item)
                    this.urlUploadImg(item, this.imgList320)
                } else {
                    item.type = 5
                    this.imgLIst112.unshift(item)
                    this.urlUploadImg(item, this.imgLIst112)
                }
            })
            this.cancleChecked()
        },

        // url 上传图片
        async urlUploadImg (item, list) {
            // item.url = item.url.replace('http://', 'https://')
            try {
                let res = await this.$http.get('/file/uploadPicByUrl', {
                    params: {
                        url: item.url
                    }
                })
                if (res.code === '0') {
                    item.url = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                    list.splice(list.indexOf(item), 1)
                }
                item.loading = false
                this.$set(list, list.indexOf(item), item)
            } catch (error) {
                item.loading = false
                list.splice(list.indexOf(item), 1)
            }
        },

        // 主分包设置
        // 获取主分包游戏详情
        async getPackageDetail () {
            let res = await this.$http.get('/gameLeader/morePackages', {
                params: {
                    gameId: this.id
                }
            })
            this.packageDetail = res.data
            this.loading = false
            if (this.$route.query.scroll) {
                this.$nextTick(() => {
                    this.$refs.gameTop.scrollTop = this.$refs.gameTop.scrollHeight
                })
            }
            if (this.$route.query.same) {
                this.addAssociated()
            }
        },

        // 分身游戏添加分身
        addAssociated () {
            this.packageType = '添加分身至当前游戏'
            if (this.packageDetail && this.packageDetail.nodes && this.packageDetail.nodes.length) {
                this.mainPackageDList = [this.detail, ...this.packageDetail.nodes]
            } else {
                this.mainPackageDList = [this.detail]
            }
            this.showGameList = true
        },

        // 分身游戏解除关联
        noAssociated (item) {
            this.$confirm('此操作可能影响其他数据, 是否继续解除?', '解除关联', {
                confirmButtonText: '解除关联',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$http.post('/gameLeader/removeRelation', {
                    gameId: item.gameId
                })
                if (res.code === '0') {
                    this.getPackageDetail()
                    this.$message({
                        type: 'success',
                        message: '解除分身关联成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            }).catch(() => {
            })
        },

        // 类似游戏  添加为分身
        addPlace (item) {
            item.gameid = item.gameId
            this.$confirm('此操作可能影响其他数据, 是否继续添加?', '添加为当前游戏分身', {
                confirmButtonText: '添加',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.packageType = '添加分身至当前游戏'
                this.checkGame(item)
            }).catch(() => {
            })
        },

        // 类似游戏  设置为分身
        setPlace (item) {
            item.gameid = item.gameId
            this.$confirm('此操作可能影响其他数据, 是否继续设置?', `将当前游戏设为游戏ID ${item.gameId} 的分身`, {
                confirmButtonText: '设置',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.packageType = '切换到其他主游戏'
                this.checkGame(item)
            }).catch(() => {
            })
        },

        // 类似包名  关联至类似游戏
        similarCheck (item) {
            this.$confirm('此操作可能影响其他数据, 是否继续设置?', '添加类似包名至分身', {
                confirmButtonText: '添加',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$http.post('/gameLeader/similarPackageLeader', {
                    gamePackage: item.gamePackage,
                    leaderId: this.id
                })
                if (res.code === '0') {
                    this.getPackageDetail()
                    this.$message({
                        type: 'success',
                        message: '设置成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data
                    })
                }
            }).catch(() => {
            })
        },

        // 主 分游戏进行切换 接口
        async dataMove2Leader (gameId, leaderId) {
            // gameId 分身ID
            // leaderId 主游戏ID
            let res = await this.$http.post('/gameLeader/dataMove2Leader', {
                gameId,
                leaderId
            })
            if (res.code === '0') {
                this.getPackageDetail()
                this.$message({
                    type: 'success',
                    message: '设置成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        checkGame (gameItem, id) {
            if (this.packageType === '切换到其他主游戏') {
                this.dataMove2Leader(this.id, gameItem.gameid)
            } else if (this.packageType === '添加分身至当前游戏') {
                this.dataMove2Leader(gameItem.gameid, this.id)
            }
            this.showGameList = false
        },

        goGameDetailBlank (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        setMainIcon (icon) {
            this.$confirm('设为主游icon，此操作不可恢复，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.detail.icon = icon
                this.saveGame()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        }
    },

    components: {
        videoListBox,
        apkAnalysis,
        mainPackageCheckGame,
        gameCutImg
    }
}
</script>

<style lang="scss" scoped>
    .game-detail {
        width: 100%;
        height: 100%;
        .game-detail-box {
            position: relative;
            height: 100%;
            width: 100%;
            .game-top {
                overflow: auto;
                height: 100%;
                padding-bottom: 76px;
            }
            .game-bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 76px;
                background-color: #fff;
                padding: 20px 0;
                display: flex;
                justify-content: center;
                .save-btn {
                    margin-left: 200px;
                }
                .btn {
                    width: 150px;
                    padding: 10px;
                }
            }
        }

        .same-package-btn-box {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #606266;
            .same-package-title {
                width: 100px;
                font-weight: 500;
                text-align: right;
            }
            .same-package-type {
                margin-right: 10px;
            }
        }
        .form-flex {
            display: flex;
            .left-form {
                flex: 3;
            }
            .right-form {
                // padding: 0 20px;
                padding-left: 10px;
                flex: 2;
                .right-items {
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #606266;
                    .right-title {
                        width: 80px;
                        padding-right: 10px;
                        text-align: right;
                    }
                    .right-content {
                        flex: 1;
                    }
                    .rate-box {
                        display: flex;
                        .rate-num {
                            color: rgb(255, 153, 0);
                        }
                    }
                }
            }
        }
        .items-card {
            margin-bottom: 20px;
            .card-title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 10px;
                .card-num {
                    font-size: 12px;
                    margin-left: 10px;
                }
                .video-set {
                    font-size: 12px;
                    margin-left: 10px;
                    color: #409EFF;
                    cursor: pointer;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .video-scroll-list {
                overflow-x: scroll;
                .scroll-wrap {
                    display: flex;
                    .scroll-item {
                        margin-right: 10px;
                        &:hover {
                            background-color: #eeeeee;
                        }
                        .scroll-btn {
                            margin-top: 10px;
                            display: flex;
                            justify-content: center;
                        }
                    }
                }

            }
            .dragging-box {
                display: flex;
                flex-wrap: wrap;
                .dragging-item {
                    margin-right: 10px;
                    padding: 0 0px 10px;
                    &:hover {
                        background-color: #eeeeee;
                    }
                    .dragging-btn {
                        margin-top: 10px;
                        display: flex;
                        justify-content: center;
                    }
                }
            }
        }

        // 素材
        .material-box {
            .material-imgs {
                margin-bottom: 10px;
            }
        }

        // 主分包设置
        .package-set-box {
            .package-item {
                display: flex;
                align-items: center;
                margin: 10px 0;
                .package-title {
                    font-size: 14px;
                }
                .package-btn {
                    font-size: 12px;
                    margin-left: 10px;
                    color: #409EFF;
                    cursor: pointer;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .table-app-box {
                // display: flex;
                > img {
                    width: 60px;
                    height: 60px;
                }
            }
            .table-btn {
                font-size: 12px;
                color: #67C23A;
                font-weight: 500;
                cursor: pointer;
            }
        }
        .main-package-check-game {
            /deep/ .el-dialog__body {
                padding: 0px 20px 20px;
            }
        }

        .baidu-search-box {
            /deep/ .el-dialog__body {
                padding: 0px 20px 20px;
            }
            .baidu-box {
                min-height: 300px;
                .search-box {
                    display: flex;
                    .baidu-btn {
                        width: 100px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        letter-spacing: 1px;
                        background: #38f;
                        font-size: 14px;
                        color: #ffffff;
                        cursor: pointer;
                    }
                }

                .baidu-img-list-box {
                    margin-top: 10px;
                    max-height: 500px;
                    overflow: scroll;
                    .baidu-img-list-item {
                        position: relative;
                        float: left;
                        margin-right: 3px;
                        margin-bottom: 3px;
                        border: 1px solid #ffffff;
                        &:hover {
                            .hover-box {
                                opacity: 1;
                            }
                        }
                        &.no-show-img {
                            display: none;
                        }
                        &.img-checked {
                            border-color: #409eff;
                            .check-box {
                                background-color: #409eff;
                            }
                        }
                        .hover-box {
                            opacity: 0;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            z-index: 1;
                            text-align: right;
                            padding: 10px;
                            width: 100%;
                            height: 35px;
                            background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
                            font-size: 14px;
                            color: #ffffff;
                        }
                        .check-box {
                            position: absolute;
                            top: 10px;
                            left: 10px;
                            z-index: 1;
                            width: 12px;
                            height: 12px;
                            border: 1px solid #dcdfe6;
                            background-color: #fff;
                            cursor: pointer;
                            border-radius: 3px;
                            &:hover {
                                border-color: #409eff;
                            }
                        }
                    }
                }

                .no-baidu-img {
                    min-height: 300px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .baidu-center {
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .baidu-btn-box {
                margin-top: 10px;
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }
        }

        .index-show-list {
            /deep/ .el-dialog__body {
                padding: 0 20px 20px;
            }
        }
    }
</style>
